<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css"
        media="all">
  <link rel="stylesheet" href="../css/public.css" media="all">
</head>

<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <fieldset class="table-search-fieldset">
      <legend>统计条件</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">

          <div class="layui-form-item">
            <div class="layui-input-inline">
              <button class="layui-btn" id="demo1">
                统计
                <i class="layui-icon layui-icon-down layui-font-12"></i>
              </button>
            </div>

            <div>
              <label  id="label" class="layui-form-label"></label>
            </div>

            <div class="layui-input-inline">
              <input id="test2" type="text" name="test2" autocomplete="off"
                     class="layui-input"  placeholder="点击选择时间范围">
            </div>

            <div class="layui-inline">
              <button id="serachBtn" type="button"
                      class="layui-btn layui-btn-primary" lay-submit
                      lay-filter="data-search-btn">
                <i class="layui-icon"></i> 搜 索
              </button>
            </div>

          </div>

        </form>
      </div>
    </fieldset>

    <table class="layui-hide" id="currentTableId"
           lay-filter="currentTableFilter">
    </table>

  </div>
</div>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
  layui.use([ 'form', 'table', 'layer', 'laydate','dropdown' ], function() {
    var $ = layui.jquery, form = layui.form, table = layui.table;
    layer = layui.layer;
    laydate = layui.laydate;
    var dropdown = layui.dropdown;


    //渲染下拉框
    dropdown.render({
      elem: '#demo1', //可绑定在任意元素中，此处以上述按钮为例
      data: [{
        title: '会员',
        id: 1
      },{
        title: '订单',
        id: 2
      }],

      click: function(data){
        if(data.id===1){
          $("#label").html(data.title)
          //日期时间选择器
          laydate.render({
            elem: '#test2'
            ,type: 'datetime'
            ,range: '~'
          });
        } else{
          $("#label").html(data.title)
          laydate.render({
            elem: '#test2'
            ,type: 'datetime'
            ,range: '~'
          });
        }
      }
    });

    //查会员表时展示的表格
    var tableRender=function (){
      table.render({
        elem : '#currentTableId',
        url : '/count/list',//请求放在表格中的数据
        where:{
          source:$("#label").html(),
          sourceJoinTime:$("#test2").val()
        },
        toolbar : '#toolbarDemo',
        defaultToolbar : [ 'filter', 'exports', 'print', {
          title : '提示',
          layEvent : 'LAYTABLE_TIPS',
          icon : 'layui-icon-tips'
        } ],
        cols : [ [ {
          type : "checkbox",

        },{
          field : 'status',
          title : '账号状态',
          sort : true
        },
          {
            field : 'num',
            title : '数量',
            sort : true
          }
        ] ],
      });
    }

    //查订单表时展示的表格
    var tableRender2=function (){
      table.render({
        elem : '#currentTableId',
        url : '/count/list',//请求放在表格中的数据
        where:{
          source:$("#label").html(),
          sourceJoinTime:$("#test2").val()
        },
        toolbar : '#toolbarDemo',
        defaultToolbar : [ 'filter', 'exports', 'print', {
          title : '提示',
          layEvent : 'LAYTABLE_TIPS',
          icon : 'layui-icon-tips'
        } ],
        cols : [ [ {
          type : "checkbox",

        },{
          field : 'status',
          title : '订单状态',
          sort : true
        },{
            field : 'num',
            title : '订单数量',
            sort : true
          },{
          field : 'sumPrice',
          title : '订单总价',
          sort : true
        }
        ] ],
      });
    }

    $("#serachBtn").on("click", function() {
      //先判断一下查询的source
      var data=$("#label").html();
      var data1=$("#test2").val();
      if (data===""){
        layer.msg("请先选择统计条件!")
      }else if(data1==""){
        layer.msg("请选择统计范围!")
      }else {
         if(data==='会员'){
          tableRender();
        }else {
          tableRender2();
        }
      }
    });

  });
</script>

</body>
</html>